import * as  React from "react";
import { Picker } from '@tarojs/components'
import moment from 'moment'




type Prop = {
  children?: React.ReactNode,
  /**默认时间的格式 YYYY-MM-DD HH:mm */
  defaultDateTimeFormat?: 'YYYY-MM-DD HH:mm'
  /**默认当前时间 */
  defaultDateTime?: string | moment.Moment | Date,
  /**返回的时间格式为 defaultDateTimeFormat*/
  onValueChange?: (dateTime: string) => void
}

type DsProp = number[]

export default (props: Prop) => {

  const {
    defaultDateTimeFormat = 'YYYY-MM-DD HH:mm'
  } = props

  const initDataList = (defaultMoment: moment.Moment = moment()): Array<DsProp> => {
    let year = Number(defaultMoment.format('YYYY'))
    let daysInMonth = defaultMoment.daysInMonth()
    let years: any[] = Array.from(({ length: 3 }), (v, k) => (year + k) + '年')
    let months: any[] = Array.from(({ length: 12 }), (v, k) => (k + 1) + '月')

    let days: any[] = Array.from(({ length: daysInMonth }), (v, k) => (k + 1) + '日')
    let hours: any[] = Array.from(({ length: 24 }), (v, k) => (k) + '时')
    let minutes: any[] = Array.from(({ length: 60 }), (v, k) => (k) + '分')
    let ds = [years, months, days, hours, minutes]

    console.log('initDataList ds', ds)
    return ds
  }


  const initIndex = (defaultMoment: moment.Moment = moment()): number[] => {
    let yearIndex = 0
    let monthIndex = Number(defaultMoment.format('MM')) - 1
    let dayIndex = Number(defaultMoment.format('DD')) - 1
    let hourIndex = Number(defaultMoment.format('HH')) 
    let minuteIndex = Number(defaultMoment.format('mm')) 
    let ds = [yearIndex, monthIndex, dayIndex, hourIndex, minuteIndex]

    // //console.log('initIndex ds', ds)
    return ds
  }


  let defaultDateTime = moment()

  if (props.defaultDateTime) {
    switch (typeof props.defaultDateTime) {
      case 'string':
        defaultDateTime = moment(props.defaultDateTime, defaultDateTimeFormat)
        break;
      case 'object': {
        if (moment.isMoment(props.defaultDateTime)) {
          defaultDateTime = props.defaultDateTime
        } else if (props.defaultDateTime instanceof Date) {
          defaultDateTime = moment.utc(props.defaultDateTime)
        }
      }
      default: break;
    }
  }

  const [state, dispatch] = React.useReducer((state, action) => ({ ...state, ...action }), {
    dataList: initDataList(defaultDateTime),
    index: initIndex(defaultDateTime)
  })



  React.useEffect(() => {

  }, [])



  return <Picker
    mode='multiSelector'

    range={state.dataList}
    value={state.index}
    onChange={e => {

      let year = state.dataList[0][e.detail.value[0]]
      let month = state.dataList[1][e.detail.value[1]]
      let day = state.dataList[2][e.detail.value[2]]
      let hour = state.dataList[3][e.detail.value[3]]
      let minte = state.dataList[4][e.detail.value[4]]
      // //console.log('onChange', e.detail.value,year,month,day,hour,minte)
      let dateTime = moment(`${year}-${month}-${day} ${hour}:${minte}`, 'YYYY-M-D H:m').format(defaultDateTimeFormat)
      if (props.onValueChange) {
        props.onValueChange(dateTime)
      }
    }}
    onColumnChange={e => {
      /**{column: 1, value: 9} */
      // //console.log('onColumnChange', e.detail, state)
      state.index[e.detail.column] = e.detail.value
      if (new Set([0, 1]).has(e.detail.column)) {
        let year = state.dataList[0][state.index[0]]
        let month = state.dataList[1][state.index[1]]
        let daysInMonth = moment(`${year}${month}`, 'YYYY年M月').daysInMonth()
        state.dataList[2] = Array.from(({ length: daysInMonth }), (v, k) => (k + 1) + '日')
        let dataList = state.dataList.map(i => i)
        dispatch({ dataList })
      }
    }}
  >
    {props.children}
  </Picker>
}